<template>
  <div class="container">
    <section class='f-mtp10'>
      <div class='u-title'>
        <h2>筛选查询</h2>
      </div>
      <div class='u-content u-filter f-ptp10'>
        <div class='u-filter-item'>
          <label for="">所属分类：</label>
          <CaseTypeSelect class='f-w200' @getCaseType='getCaseType' placeholder='问题分类' />
        </div>
        <div class='u-filter-item'>
          <label for="">输入搜索：</label>
          <el-input class='f-w120' v-model="mobileNo" placeholder="用户手机号"></el-input>
        </div>
        <div class='u-filter-item'>
          <label for="">地区筛选：</label>
          <Region @getRegion='getRegion' placeholder='选择地区' />
        </div>
        <el-button class='f-h40 f-mbt10' @click="getList" type="primary">查询</el-button>
      </div>
    </section>

    <div class='f-mtp20'>
      <div class='u-title'>
        <h2>咨询管理</h2>
        <router-link class='u-title-btn' to='/home/addConsultRecord'>新增记录</router-link>
      </div>
      <el-table
        :data="consultList"
        border
        style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"></el-table-column>
        <el-table-column prop="mobileNo" label="用户手机" width="180"></el-table-column>
        <el-table-column label="地区" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.provinceName}} {{scope.row.cityName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="caseTypeName" label="问题分类" width="180"></el-table-column>
        <el-table-column prop="createTime" label="咨询时间" width="180">
          <template slot-scope="scope">
            <span>{{format(scope.row.createTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="咨询方式" width="180"></el-table-column>
        <el-table-column prop="manage" label="咨询记录">
          <template slot-scope="scope">
            <span @click="showBtnClickEvent(scope.row)" class='s-c-green f-csp f-mrt10'>查看</span>
            <router-link  class='s-c-green f-csp f-mrt10' :to='"/home/editConsultRecord/" + scope.row.id'>编辑</router-link>
            <span @click="deleteBtnClickEvent(scope.row)" class='s-c-red f-csp'>删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div class='f-ptp20 f-pbt20'>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          background
          :total="totalCount">
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="查看详情"
      :visible.sync="dialogVisible"
      width="30%">
      <span v-html='detail'></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CaseTypeSelect from '../../components/CaseTypeSelect';
import Region from '../../components/Region';
export default {
  name: 'ConsultManage',
  components: {
    'CaseTypeSelect': CaseTypeSelect,
    'Region': Region
  },
  data() {
    return {
      dialogVisible: false,
      detail: '',
      caseType: '',
      mobileNo: '',
      province: '',      // 选择地区 省
      city: '',
      currentPage: 1,
      pageSize: 10,
      totalCount: 0,
      consultList: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    format(date) {
      return this._utils.format(date, 'yyyy-mm-dd');
    },
    // 删除按钮点击事件
    deleteBtnClickEvent(row) {
      this.$confirm('确定删除该记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delete(row.id)
      })
    },
    // 删除咨询记录
    delete(consultId) {
      this.$store.dispatch('HANDLE_CONSULT', {
        id: consultId,
        state: 'deleted'
      }).then(res => {
        if(res.data.retCode == 0) {
          this.$message.success('删除成功！');
          this.getList();
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      });
    },
    // 查看按钮点击事件
    showBtnClickEvent(row) {
      this.dialogVisible = true;
      this.detail = row.content;
      console.log('row.content', row);
    },
    // 获取地区
    getRegion(obj) {
      if(obj.hasOwnProperty('province')) {
        this.province = obj.province.id;
      } else {
        this.province = '';
      }
      if(obj.hasOwnProperty('city')) {
        this.city = obj.city.id;
      } else {
        this.city = '';
      }
      console.log('city::', this.city);
    },
    // 获取问题分类id
    getCaseType(caseType) {
      this.caseType = caseType;
    },
    getList() {
      this.$store.dispatch('GET_CONSULT_LIST', {
        pageNum: this.currentPage - 1,
        pageSize: this.pageSize,
        mobileNo: this.mobileNo,
        caseType: this.caseType,
        province: this.province,
        city: this.city
      }).then(res => {
        if(res.data.retCode == 0) {
          this.consultList = res.data.data;
          this.totalCount = res.data.totalCount;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },

    // 分页组件回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top{
  /* display: flex; */
  overflow: hidden;
  padding: 10px 0;
}
.top-item{
  float: left;
  margin-right: 20px;
}
.w-120{
  width: 120px;
}
.w-200{
  width: 200px;
}
</style>
